<template>
  <div class="info-tab-item">
    <div class="item-img">
      <img :src="img_url + face" alt>
    </div>
    <div class="item-detail">
      <div class="item-title">
        <h1 class="two-dan">{{title}}</h1>
      </div>
      <div class="item-about">
        <span class="item-time">{{time}}</span>
        <span class="item-visit">{{views}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    // 图标
    face: {
      type: String,
      default: ""
    },
    //标题
    title: {
      type: String,
      default: ""
    },
    //时间
    time: {
      type: String,
      default: ""
    },
    //观看数
    views: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState(["img_url"])
  }
};
</script>
<style scoped lang="scss">
.info-tab-item {
  padding: 0.12rem;
  display: flex;
  height: 1rem;
  border-top: 0.01rem solid #f6f6f6;
  background-color: #fff;
}

.info-tab-item .item-img {
  width: 1.3rem;
  height: 0.74rem;
  background-color: #333;
  margin-right: 0.06rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.info-tab-item .item-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-tab-item .item-detail .item-title h1 {
  font-size: 0.14rem;
  color: rgba(48, 49, 51, 1);
}
.info-tab-item .item-detail .item-title h1.two-dan {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  height: 0.4rem;
}

.info-tab-item .item-detail .item-about {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.04rem;
}

.info-tab-item .item-detail .item-about span {
  font-size: 0.12rem;
  vertical-align: middle;
  height: 0.16rem;
  line-height: 0.16rem;
  color: rgba(153, 153, 153, 1);
}

.info-tab-item .item-detail .item-about .item-visit {
  position: relative;
}

.info-tab-item .item-detail .item-about .item-visit::after {
  content: "";
  width: 0.14rem;
  height: 0.1rem;
  position: absolute;
  top: 0.04rem;
  left: -0.16rem;
  background: url("../../assets/images/eye.png") no-repeat center/cover;
}
</style>


